<template>
  <el-card class="box-card box-card-list">
    <div slot="header" class="clearfix">
      <div class="temHeader">
        <span class="proProgress" />
        <span class="area-header-title">{{ $t('任务') }}</span>
        <a :class="ulStylePar" class="taskCustom" style="margin-left: 10px;" @click="participateBtn">{{ $t('我参与') }}</a>
        <a :class="ulStyleDis" class="taskCustom" @click="distributionBtn">{{ $t('我分配') }}</a>
        <i class="el-icon-plus" @click="openTaskBaseForm('', true)" />
      </div>
    </div>
    <div v-loading="loading" class="text item tabSpecial">
      <div v-if="dataList && dataList.length > 0">
        <div v-for="(value, index) in dataList" :key="index">
          <div class="link-type distributionClass showListName" @click="openTaskBaseForm(value, false)">
            <span class="">{{ value.name }}</span>
          </div>
        </div>
        <el-pagination
          v-show="total > 0"
          small
          :page-size="5"
          :pager-count="5"
          layout="prev, pager, next"
          :total="total"
          @current-change="pageParSearch"
        />
      </div>
      <div v-else class="noneData">
        <div>
          <svg-icon icon-class="none" class-name="none-icon" />
          <p>{{ $t('暂无数据') }}</p>
        </div>

      </div>
      <!-- 添加或修改任务管理对话框 -->
      <el-dialog :title="$t('任务管理')" :visible.sync="taskBaseLoading" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
        <taskBaseForm ref="taskBaseForm" @closeTaskBaseLoading="closeTaskBaseLoading" />
      </el-dialog>
    </div></el-card>
</template>

<script>
  import { getParticipate, getDistribution } from '@/api/deal/taskBase/taskBase'
  import taskBaseForm from '@/views/deal/taskBase/taskBaseForm.vue'
  export default {
    components: {
      taskBaseForm
    },
    data() {
      return {
        total: 0,
        dataList: [],
        // 遮罩层
        loading: false,
        taskBaseLoading: false,
        ulStylePar: '',
        ulStyleDis: '',
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          businessId: undefined
        },
        flag: true
      }
    },
    mounted() {
      this.participateBtn()
    },
    methods: {
      pageParSearch(val) {
        this.queryParams.pageNum = val
        if (this.flag) {
          this.participateBtn()
        } else {
          this.distributionBtn()
        }
      },
      pageDisSearch(val) {
        this.queryParams.pageNum = val
        this.distribution()
      },
      participateBtn() {
        this.flag = true
        this.ulStylePar = 'choiceCss'
        this.ulStyleDis = ''
        this.loading = true
        this.queryParams.businessId = this.$route.query.id
        getParticipate(this.queryParams).then(response => {
          this.dataList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      distributionBtn() {
        this.loading = true
        this.flag = false
        this.ulStylePar = ''
        this.ulStyleDis = 'choiceCss'
        this.queryParams.businessId = this.$route.query.id
        getDistribution(this.queryParams).then(response => {
          this.dataList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 打开任务管理form页面
      openTaskBaseForm(row, status) {
        this.taskBaseLoading = true
        this.$nextTick(() => {
          this.$refs.taskBaseForm.isSubmitShow = status
          this.$refs.taskBaseForm.init(row)
        })
      },
      closeTaskBaseLoading() {
        this.taskBaseLoading = false
      }

    }
  }
</script>
<style scoped>
  .distributionClass{
    width: 100%;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
  }
  .taskCustom{
    padding: 6px 6px;
    border: 1px solid #e6ebf5;
    font-size: 12px;
    margin: 0px -5px 0px 0px;
  }
  .el-icon-plus{
    cursor: pointer;
    float: right;
    margin-top: 4px;
  }

  .choiceCss{
    background: #409EFF;
    color: white;
  }
  .showListName{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .el-pagination el-pagination--small{
    text-align: center;
  }
</style>
